//问题详情
let detailApp = new Vue({
    el:"#detailApp",
    data:{
        question:{ }
    },
    methods:{
        //detail.html加载后，请求服务器，加载指定的问题
        loadQuestion:function () {
            console.log("question_details.loadQuestion() run")
            let qid = location.search;  // location.search获取请求参数，结果是 ?27
            // 把 ？27 中的27拆出来
            if(qid == null){
                alert("id 不能为空");
                return ;
            }
            qid = qid.substring(1);
            console.log( "qid: " + qid )
            $.ajax({
                url:"/questions/" + qid ,  //对应到QuestionController中GET(/{id})
                method:"GET",
                success:function (result) {
                    console.log("result.code" + result.code )
                    if( result.code == 200 ){
                       detailApp.question = result.data;
                       console.log( "question: " + detailApp.question );
                        //detailApp.updateDuration();
                        //虽然是声明在utils.js文件中，但在 detail.html中一起引用。
                        //可以看成都是写在 detail.html 中一起的。
                        addDuration( detailApp.question )
                    }else{
                        alert( result.message )
                    }
                }
            });
        },
        // 声明式函数： 定义并不代表执行。需要被调用 ！什么时候调用，在哪调用 ？
        /*
        updateDuration:function () {
            //拿到问题创建时间的毫秒数
            let createTime = new Date(this.question.gmtCreate).getTime();
            // 拿到现在时间的毫秒数
            let now = new Date().getTime() ;
            console.log( now );
            // 时间差：毫秒数
            let duration = now - createTime ;
            // 小于 1 分钟
            if( duration < (60 * 1000) ){
                // JS 中声明变量的方式。可以不用关键字
                this.question.duration = "刚刚" ;
            }else if( duration < ( 1000 * 60 *  60 )){
                // tofix(0) 取整数，小数精度为 0 位。
                this.question.duration = (duration/1000/60).toFixed(0) + " 分钟之前" ;
            }else if( duration < ( 1000 * 60 * 60 * 24 )){
                this.question.duration = (duration/1000/60/60).toFixed(0) + " 小时之前" ;
            }else if( duration < ( 1000 * 60 * 60 * 24 * 365 )){
                this.question.duration = (duration/1000/60/60/24).toFixed(0) + " 天之前" ;
            }else {
                this.question.duration = (duration/1000/60/60/24/365).toFixed(0) + " 年之前" ;
            }
        },*/
    },
    created:function () {
        this.loadQuestion();
    }
});


//解答列表
let anwerApp = new Vue({
    el: "#answerApp",
    data:{
        answers:[] ,
        message:"" ,    // 为了增强交互体验，保存消息的变量
        hasError: false //用来控制是否显示页面上的消息元素
    },
    methods:{
        //采纳功能 detail.html中弟385行的调用
        answerSolved:function (answerId,answer){
            if(answerId.isAccept == 1) {
                alert("该答案已经被采纳了");
                return;
            }
            $.ajax({
                url:"/answers/"+answerId+"/solved",
                method:"get",
                success:function (r){
                    console.log("发送采纳的请求了");
                    if(r.code == 201){
                        answer.isAccept = 1;
                    }else {
                        alert(r.message);
                    }
                }
            })
        },

        //更新评论的方法：question/detail.html 365行
        updateComment:function (commentId,answerId,index,comments){
            //1.获取页面中的信息 使用jquery选择器 获取页面元素对象
            //$("#id名")  可以获取页面元素对象 转换成jquery对象
            //$("#editcomment1 textarea" )一定要有空格 表示子孙元素 评论中的文本域元素
            $("#editComment"+commentId+"   testarea");
            let content = textarea.val();
            if(!content)
                return ;
            //封装表单 因为ajax 发送数据时 只给了一个保存数据的位置 但是我们要穿两个参数
            let form = {
                answerId: answerId,
                content: content,
            }
            //数据整理完成后 开始发送
            $.ajax({
                url: "/comments/"+commentId+"/update",
                method: 'post',
                data: form,
                //上面负责发送 下面是接收到服务器响应结果
                success:function (r){
                    if( r.code == 200){
                        //服务器修改成功后 在前端完成修改
                        //set方法是Vue提供的 用来修改指定的属性
                        //告诉修改什么内容
                        Vue.set();
                    }else{
                        alert( r.message );
                    }
                }
            });
        },

        removeComment:function (commentId,index,comments) {
            if(!commentId){
                return;
            }
            $.ajax( {
                url:"/comments/" + commentId + "/delete", //路径参数 "comments/2/delete
                method:"get",
                success:function (r) {
                    // 状态码： 410 表示永久删除，无法再获取
                    if( r.code == 410){
                        //如果服务端删除成功，那么前端同步删除对应的评论
                        //splice() JS数组的方法，从数组 index 位置开始，删除指定个数的元素。
                        //[ 3,5,7,9,11,13,15,17,19 ]  ->  arr.splice( 3, 2 )  -> [3,5,7,13,15,17,19]
                        comments.splice(index, 1);
                    }else{
                        alert( r.message );
                    }
                }
            } );
        },


        //提交评论的方法, 评论依赖回答id
        postComment:function ( answerId ) {
            //利用jQuery的子孙元素选择器，先根据id找到div,再根据标签名找到文件域。
            // 精确地拿到评论元素
            // textarea 是 div 的子孙元素，中间一定要有空格
            let textarea = $("#addComment"+answerId+" textarea");
            let content = textarea.val();  //拿到评论内容
            if( !content ){
                return;
            }
            //创建一个js对象，用来封装和传递评论内容，和后端 CommentVo 映射。
            let form = {
                //属性名要和后端值对象 CommentVo 中的属性名一致。
                answerId: answerId,
                content: content
            };
            $.ajax({
                url:"/comments",
                method:"post",
                data: form,
                success:function (result){
                    if( result.code == 201 ){
                        //评论属于某个解答的评论数组中的一员。分层。
                        textarea.val(""); //改写评论区为空，即：清空评论区
                        let comment = result.data;      //拿到新增的评论
                        let answers = anwerApp.answers; //获取当前所有的解答
                        for(let i=0;i<answers.length;i++){
                            if( answers[i].id == answerId ){    //找到添加评论的那个解答
                                answers[i].comments.push( comment ); //添加到这个解答的评论数组的后面
                                console.log("answer[i].comments: " + answers[i].comments)
                                break;
                            }
                        }
                    }else{
                        alert(result.message);
                    }
                }
            })


        },
        updateDuration:function(){
            for(let i=0;i<this.answers.length;i++){
                addDuration( this.answers[i] );
            }
        },
        loadAnswers:function () {
            console.log("quesiton_detail.js->answerApp.loadAnswers() ")
            //加载页面时，获取问题 id .
            let qid = location.search ;
            if(!qid){
                console.log("loadAnswers.qid == null ")
                anwerApp.message="必须要有问题ID";
                anwerApp.hasError = true ; //把消息显示出来。
                return ;  //如果没有值就不执行加载解答列表过程
            }
            qid = qid.substring(1);
            $.ajax({
                url:"/answers/question/"+qid ,
                method: 'GET',
                success:function (result){
                    console.log("loadAnswer.success ")
                    if(result.code == 200){
                        console.log("loadAnswer.result == 200 ")
                        hasError = false ;
                        anwerApp.answers = result.data ;
                        anwerApp.updateDuration();
                    }else{
                        anwerApp.hasError = true ; //表示要显示错误消息
                        anwerApp.message = result.message;
                    }
                }
            })
        }
    },
    created:function (){
        //页面加载完成后，加载解答列表
        this.loadAnswers();
    }
});